<template>
	<div class="nodeflow-components">
		<div class="node-wrap">
			<div v-for="(item, index) in nodeConfig" :key="index" class="node-wrap-box">
				<div class="box" @click="setPerson(item, item.type, index)">
					<div class="title" :style="
						'background: rgb(' + ['87, 106, 149', '230, 162, 60', '72, 128, 255',][item.type] + ');'">
						<div style="width:15px;height:15px;display:flex;">
							<img v-if="item.type === 0" src="@/assets/images/fq1.png">
							<img v-if="item.type === 1" src="@/assets/images/sp1.png">
							<img v-if="item.type === 2" src="@/assets/images/cs1.png">
						</div>
						<span class="editable-title">{{ item.type === 0 ? $t('text.sponsor') : item.type === 1 ?
							$t('text.approvalPerson') : $t('text.ccTo') }}</span>
						<i v-if="item.type > 0 && propuptype !== 'detail'" class="el-icon-close close" @click.stop="delNode(index)" />
					</div>
					<div class="content">
						<div v-if="item.type == 0" class="text">
							<span v-if="item.launchType === 0">{{ $t('text.allYou') }}</span>
							<span v-else>{{ item.launchNames }}</span>
						</div>
						<div v-if="item.type == 1" class="text">
							<span v-if="item.examineNames === ''" class="placeholder">
								{{ $t('placeholderTip.pSelect') + $t('placeholderList')[item.type] }}
							</span>
							{{ item.examineNames }}
						</div>
						<div v-if="item.type == 2" class="text">
							<span v-if="item.ccIds === ''" class="placeholder">
								{{ $t('placeholderTip.pSelect') + $t('placeholderList')[item.type] }}
							</span>
							{{ item.ccNames }}
						</div>
						<i class="el-icon-arrow-right arrow" />
					</div>
					<div v-if="isTried && item.error" class="error_tip">
						<i class="el-icon-warning" style="color: rgb(242, 86, 67);" />
					</div>
				</div>
				<addNode :childNodeP.sync="item" :nowIndex="index" :propuptype="propuptype"></addNode>
			</div>
		</div>
		<!-- 发起人  抄送人  审批人 -->
		<el-drawer :visible.sync="approverDrawer" :modal="true" custom-class="set_promoter" :append-to-body="true"
			direction="rtl" size="507px" :before-close="closeDrawer">
			<div slot="title" class="title flex">
				<span>{{ approverConfig.type === 0 ? $t('text.sponsor') : approverConfig.type === 1 ? $t('text.approvalPerson') :
					$t('text.ccTo') }}</span>
			</div>
			<div>
				<div v-if="approverConfig.type == 0" class="drawer-content">
					<el-tabs :is-hide-nav="true">
						<el-tab-pane :label="$t('formLabel.settingInitiator')">
							<el-form label-width="90px">
								<el-form-item :label="$t('text.sponsor')" v-if="propuptype !== 'detail'">
									<div @click.stop="getOpen(0)"
										style="cursor: pointer;cursor: pointer;border-radius: 4px;border: 1px solid #DCDFE6;">
										<el-tag :key="tag.id" v-for="tag in selectList2" closable :disable-transitions="false"
											@close="handleClose(tag)" style="margin-left:5px">
											{{ tag.name }}
										</el-tag>
										<span v-if="selectList2.length === 0" style="color: #909399;margin-left:10px">{{
											$t('placeholderTip.pSelect') }}</span>
										<span v-if="selectList2.length === 0">
											<i class="el-icon-search" style="position: absolute;right:10px;line-height:38px;color:#B9B9B9"></i>
										</span>
									</div>
								</el-form-item>
								<el-form-item :label="$t('text.sponsor')" v-else>
									<div style="cursor: pointer;cursor: pointer;border-radius: 4px;border: 1px solid #DCDFE6;">
										<el-tag :key="tag.id" v-for="tag in selectList2" closable :disable-transitions="false"
											style="margin-left:5px">
											{{ tag.name }}
										</el-tag>
										<span v-if="selectList2.length === 0" style="color: #909399;margin-left:10px">{{
											$t('placeholderTip.pSelect') }}</span>
										<span v-if="selectList2.length === 0">
											<i class="el-icon-search" style="position: absolute;right:10px;line-height:38px;color:#B9B9B9"></i>
										</span>
									</div>
								</el-form-item>
							</el-form>
						</el-tab-pane>
						<!-- <el-tab-pane label="表单权限" /> -->
					</el-tabs>
					<!-- 发起人 选择部门 人员 -->
					<el-dialog :title="$t('text.organizationalStructure')" width="60%" :before-close="dialogClose"
						:visible.sync="addDialogVisible" custom-class="add_dialog" :append-to-body="true"
						:modal-append-to-body="false">
						<div class="selectBox">
							<div class="left">
								<div class="search">
									<el-input v-model="filterText" :placeholder="$t('placeholderTip.pleaseSearch')"
										style="margin-right:10px" />
									<div class="div">
										<span style="margin-right:10px">{{ selectList.length }}/99</span>
										<span style="cursor: pointer" @click.stop="resetChecked(0)"><i class="el-icon-delete" /></span>
									</div>
								</div>

								<div class="selectList">
									<div v-for="(item, index) in selectList" :key="index" class="item">
										<span>{{ item.name }}</span>
										<span @click.stop="setCheckedKeys(item)"><i class="el-icon-delete" /></span>
									</div>
								</div>
							</div>
							<div class="right">
								<div class="title">{{ $t('text.departmentsPersonnel') }}</div>
								<div calss="tree">
									<el-tree ref="tree" :data="staffList" show-checkbox node-key="id" check-on-click-node
										:check-strictly="true" :filter-node-method="filterNode" default-expand-all highlight-current
										:props="defaultProps" :default-checked-keys="selectIds" @check="handleClick" />
								</div>
							</div>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button type="primary" @click="selectConfirm">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
							<el-button @click="dialogClose">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
						</span>
					</el-dialog>
				</div>
				<div v-if="approverConfig.type == 1" class="drawer-content">
					<el-tabs :is-hide-nav="true">
						<el-tab-pane :label="$t('formLabel.setUpApprover')">
							<div v-if="propuptype !== 'detail'">
								<el-form ref="approverConfig" class="demo-ruleForm" :model="approverConfig">
									<!-- <el-form-item label="门店">
                    <el-button :type="approverConfig.examineCross === 0 ? 'primary' : ''" round @click.stop="getBtn(0)">本门店</el-button>
                    <el-button :type="approverConfig.examineCross === 1 ? 'primary' : ''" round @click.stop="getBtn(1)">其他门店</el-button>
                  </el-form-item> -->
									<div v-if="approverConfig.examineCross === 0">
										<el-form-item>
											<el-radio-group v-model="approverConfig.examineType" style="line-height:40px"
												@change="setTypeRadio">
												<el-radio :label="1">{{ $t('text.specifyingMember') }}</el-radio>
												<el-radio :label="2">{{ $t('text.role') }}</el-radio>
												<!-- <el-radio :label="3">职位</el-radio> -->
												<el-radio :label="4">{{ $t('text.sponsorsThemselves') }}</el-radio>
												<el-radio :label="5">{{ $t('text.initiatorChoosesHimself') }}</el-radio>
											</el-radio-group>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineCross === 1">
										<el-form-item>
											<el-radio-group v-model="approverConfig.examineType" style="line-height:40px"
												@change="setTypeRadio">
												<el-radio :label="2">{{ $t('text.role') }}</el-radio>
												<!-- <el-radio :label="3">职位</el-radio> -->
											</el-radio-group>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 2 && approverConfig.examineCross === 0">
										<el-form-item label-width="80px" :label="$t('formLabel.ofSponsor')">
											<el-select v-model="approverConfig.examineIds" clearable :placeholder="$t('placeholderTip.pSelect')"
												style="width:100%">
												<el-option v-for="item in roleInitiatorList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 2 && approverConfig.examineCross === 1">
										<el-form-item label-width="80px" :label="$t('placeholderTip.pSelect')">
											<el-select v-model="approverConfig.examineIds" clearable :placeholder="$t('placeholderTip.pSelect')"
												style="width:100%">
												<el-option v-for="item in roleInitiatorList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 3">
										<el-form-item label-width="80px" :label="$t('formLabel.ofSponsor')">
											<el-select v-model="approverConfig.examineIds" clearable :placeholder="$t('placeholderTip.pSelect')"
												style="width:100%">
												<el-option v-for="item in postInitiatorList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 5">
										<el-form-item label-width="80px" :label="$t('formLabel.optionalMultiplayer')">
											<el-switch v-model="approverConfig.examineOptional" active-color="#e5c58d" :active-value=1
												:inactive-value=0 inactive-color="#dcdfe6" />
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 5">
										<el-form-item label-width="80px" :label="$t('formLabel.scopeSelection')">
											<el-select v-model="approverConfig.examineRange" :placeholder="$t('placeholderTip.pSelect')"
												style="width:100%">
												<el-option :label="$t('text.companyWide')" :value="1" />
												<el-option :label="$t('text.specifyingMember')" :value="2" />
												<el-option :label="$t('text.role')" :value="3" />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 1">
										<el-form-item>
											<div class="spBtn">
												<el-button type="primary" @click.stop="getOpen(1)">+{{
													$t('publicBtn.increase') + $t('text.specifyingMember') }}</el-button>
											</div>
											<el-tag v-if="selectList2" :key="tag.id" v-for="tag in selectList2" closable
												:disable-transitions="false" @close="handleClose(tag)" style="margin-left:5px">
												{{ tag.name }}
											</el-tag>
										</el-form-item>
										<el-form-item v-if="selectList2.length > 1">
											<div class="spType">
												<div class="title"> {{ $t('text.modeApproval') }}</div>
												<el-radio-group v-model="approverConfig.examineWay">
													<el-radio v-for="item in $t('examineModeList')" :key="item.value" :label="item.value"
														style="display:block">
														{{ item.label }}
														<span class="mark">({{ item.mark }})</span>
													</el-radio>
												</el-radio-group>
											</div>
										</el-form-item>
									</div>
									<div
										v-if="approverConfig.examineType === 2 || approverConfig.examineType === 3 || approverConfig.examineType === 5">
										<el-form-item>
											<div class="spType">
												<div class="title"> {{ $t('text.modeApproval') }}</div>
												<el-radio-group v-model="approverConfig.examineWay">
													<el-radio v-for="item in $t('examineModeList')" :key="item.value" :label="item.value"
														style="display:block">
														{{ item.label }}
														<span class="mark">({{ item.mark }})</span>
													</el-radio>
												</el-radio-group>
											</div>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 4">
										<el-form-item>
											<div class="spType">
												<div class="title"> {{ $t('text.processApproval') }}</div>
											</div>
										</el-form-item>
									</div>
								</el-form>
							</div>
							<div v-else>
								<el-form ref="approverConfig" class="demo-ruleForm" :model="approverConfig">
									<el-form-item :label="$t('formLabel.storeStoreLabel')">
										<el-button :type="approverConfig.examineCross === 0 ? 'primary' : ''" round>{{ $t('text.thisStore')
										}}</el-button>
										<el-button :type="approverConfig.examineCross === 1 ? 'primary' : ''" round>{{ $t('text.otherStore')
										}}</el-button>
									</el-form-item>
									<div v-if="approverConfig.examineCross === 0">
										<el-form-item>
											<el-radio-group :value="approverConfig.examineType" style="line-height:40px">
												<el-radio :label=1>{{ $t('text.specifyingMember') }}</el-radio>
												<el-radio :label=2>{{ $t('text.role') }}</el-radio>
												<!-- <el-radio :label=3>职位</el-radio> -->
												<el-radio :label=4>{{ $t('text.sponsorsThemselves') }}</el-radio>
												<el-radio :label=5>{{ $t('text.initiatorChoosesHimself') }}</el-radio>
											</el-radio-group>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineCross === 1">
										<el-form-item>
											<el-radio-group :value="approverConfig.examineType" style="line-height:40px">
												<el-radio :label=2>{{ $t('text.role') }}</el-radio>
												<!-- <el-radio :label=3>职位</el-radio> -->
											</el-radio-group>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 2 && approverConfig.examineCross === 0">
										<el-form-item label-width="80px" :label="$t('formLabel.ofSponsor')">
											<el-select :disabled="true" :value="approverConfig.examineIds" clearable placeholder=""
												style="width:100%">
												<el-option v-for="item in roleInitiatorList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 2 && approverConfig.examineCross === 1">
										<el-form-item label-width="80px" :label="$t('placeholderTip.pSelect')">
											<el-select :disabled="true" :value="approverConfig.examineIds" clearable placeholder=""
												style="width:100%">
												<el-option v-for="item in roleInitiatorList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 3">
										<el-form-item label-width="80px" :label="$t('formLabel.ofSponsor')">
											<el-select :disabled="true" :value="approverConfig.examineIds" placeholder="" style="width:100%">
												<el-option v-for="item in postInitiatorList" :key="item.id" :label="item.name" :value="item.id" />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 5">
										<el-form-item label-width="80px" :label="$t('formLabel.optionalMultiplayer')">
											<el-switch :value="approverConfig.examineOptional" active-color="#e5c58d" :active-value=1
												:inactive-value=0 inactive-color="#dcdfe6" />
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 5">
										<el-form-item label-width="80px" :label="$t('formLabel.scopeSelection')">
											<el-select :disabled="true" :value="approverConfig.examineRange" placeholder="" style="width:100%">
												<el-option :label="$t('text.companyWide')" :value=1 />
												<el-option :label="$t('text.specifyingMember')" :value=2 />
												<el-option :label="$t('text.role')" :value=3 />
											</el-select>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 1">
										<el-form-item>
											<el-tag v-if="selectList2" :key="tag.id" v-for="tag in selectList2" closable
												:disable-transitions="false" style="margin-left:5px">
												{{ tag.name }}
											</el-tag>
										</el-form-item>
										<el-form-item prop="examineWay" v-if="selectList2.length > 1">
											<div class="spType">
												<div class="title">{{ $t('text.modeApproval') }}</div>
												<el-radio-group :value="approverConfig.examineWay">
													<el-radio v-for="item in $t('examineModeList')" :key="item.value" :label="item.value"
														style="display:block">
														{{ item.label }}
														<span class="mark">({{ item.mark }})</span>
													</el-radio>
												</el-radio-group>
											</div>
										</el-form-item>
									</div>
									<div
										v-if="approverConfig.examineType === 2 || approverConfig.examineType === 3 || approverConfig.examineType === 5">
										<el-form-item prop="examineWay">
											<div class="spType">
												<div class="title"> {{ $t('text.modeApproval') }}</div>
												<el-radio-group :value="approverConfig.examineWay">
													<el-radio v-for="item in $t('examineModeList')" :key="item.value" :label="item.value"
														style="display:block">
														{{ item.label }}
														<span class="mark">({{ item.mark }})</span>
													</el-radio>
												</el-radio-group>
											</div>
										</el-form-item>
									</div>
									<div v-if="approverConfig.examineType === 4">
										<el-form-item>
											<div class="spType">
												<div class="title"> {{ $t('text.processApproval') }}</div>
											</div>
										</el-form-item>
									</div>
								</el-form>
							</div>
						</el-tab-pane>
						<!-- <el-tab-pane label="表单权限" /> -->
					</el-tabs>
					<!-- 发起人 选择人员 -->
					<el-dialog :title="$t('text.organizationalStructure')" width="60%" :before-close="dialogClose"
						:visible.sync="addDialogVisible" custom-class="add_dialog" :append-to-body="true"
						:modal-append-to-body="false">
						<div class="selectBox">
							<div class="left">
								<div class="search">
									<el-input v-model="filterText" :placeholder="$t('placeholderTip.pleaseSearch')"
										style="margin-right:10px" />
									<div class="div">
										<span style="margin-right:10px">{{ selectList.length }}/99</span>
										<span style="cursor: pointer" @click.stop="resetChecked(0)"><i class="el-icon-delete" /></span>
									</div>
								</div>

								<div class="selectList">
									<div v-for="(item, index) in selectList" :key="index" class="item">
										<span>{{ item.name }}</span>
										<span @click.stop="setCheckedKeys(item)"><i class="el-icon-delete" /></span>
									</div>
								</div>
							</div>
							<div class="right">
								<div class="title">{{ $t('text.departmentsPersonnel') }}</div>
								<div calss="tree">
									<el-tree ref="tree" :data="staffList" show-checkbox node-key="id" check-on-click-node
										:check-strictly="true" :filter-node-method="filterNode" default-expand-all highlight-current
										:props="defaultProps" :default-checked-keys="selectIds" @check="handleClick" />
								</div>
							</div>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button type="primary" @click="selectConfirm">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
							<el-button @click="dialogClose">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
						</span>
					</el-dialog>
				</div>
				<div v-if="approverConfig.type == 2" class="drawer-content">
					<el-tabs :is-hide-nav="true">
						<el-tab-pane :label="$t('formLabel.ccType')">
							<div v-if="propuptype !== 'detail'">
								<div style="margin:20px 0" v-if="selectList2">
									<el-tag :key="tag.id" v-for="tag in selectList2" closable :disable-transitions="false"
										@close="handleClose(tag)" style="margin-left:5px">
										{{ tag.name }}
									</el-tag>
								</div>
								<div class="spBtn" @click.stop="getOpen(2)">
									<el-button type="primary">+{{ $t('text.addCcTo') }}</el-button>
								</div>
								<el-checkbox v-model="approverConfig.ccOptional" :true-label=1 :false-label=0>{{ $t('tex.ccToTip')
								}}</el-checkbox>
							</div>
							<div v-else>
								<div style="margin:20px 0" v-if="selectList2">
									<el-tag :key="tag.id" v-for="tag in selectList2" closable :disable-transitions="false"
										style="margin-left:5px">
										{{ tag.name }}
									</el-tag>
								</div>
								<el-checkbox :value="approverConfig.ccOptional" :true-label=1 :false-label=0>{{ $t('tex.ccToTip')
								}}</el-checkbox>
							</div>
						</el-tab-pane>
					</el-tabs>

					<!-- 发起人 选择部门 人员 -->
					<el-dialog :title="$t('text.organizationalStructure')" width="60%" :before-close="dialogClose"
						:visible.sync="addDialogVisible" custom-class="add_dialog" :append-to-body="true"
						:modal-append-to-body="false">
						<div class="selectBox">
							<div class="left">
								<div class="search">
									<el-input v-model="filterText" :placeholder="$t('placeholderTip.pleaseSearch')"
										style="margin-right:10px" />
									<div class="div">
										<span style="margin-right:10px">{{ selectList.length }}/99</span>
										<span style="cursor: pointer" @click.stop="resetChecked(0)"><i class="el-icon-delete" /></span>
									</div>
								</div>

								<div class="selectList">
									<div v-for="(item, index) in selectList" :key="index" class="item">
										<span>{{ item.name }}</span>
										<span @click.stop="setCheckedKeys(item)"><i class="el-icon-delete" /></span>
									</div>
								</div>
							</div>
							<div class="right">
								<div class="title">$t('text.departmentsPersonnel')</div>
								<div calss="tree">
									<el-tree ref="tree" :data="staffList" show-checkbox node-key="id" check-on-click-node
										:check-strictly="true" :filter-node-method="filterNode" default-expand-all highlight-current
										:props="defaultProps" :default-checked-keys="selectIds" @check="handleClick" />
								</div>
							</div>
						</div>
						<span slot="footer" class="dialog-footer">
							<el-button type="primary" @click="selectConfirm">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
							<el-button @click="dialogClose">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
						</span>
					</el-dialog>
				</div>
			</div>
			<div class="set_promoter_footer flex">
				<div class="flex">
					<el-button type="primary" v-if="propuptype !== 'detail'" @click="saveApprover">{{
						$t('el.popconfirm.confirmButtonText') }}</el-button>
					<el-button @click="closeDrawer">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
				</div>
			</div>
		</el-drawer>
	</div>
</template>
<script>
import addNode from './addNode'
import { getStaffHierarchyStaffs } from '@/api/organizational-chart'
import { getRoleList } from '@/api/system-manager'
import { getPositionList } from '@/api/organizational-chart'
export default {
	name: 'NodeWrap',
	components: { addNode },
	props: ['childNodeP', 'nodeConfig', 'isTried', 'propuptype'],
	data() {
		return {
			addDialogVisible: false,
			approverConfig: {},
			newsInfo: {},
			approverDrawer: false, // 审批弹框
			hasFlag: false,
			conditionTip: '',
			index: 0,
			roleInitiatorList: [], // 角色发起人
			postInitiatorList: [], // 职位发起人
			newStaffList: [],
			filterText: '', // 搜索字段
			selectList: [], // 选中值
			selectList2: [], // 选中值
			selectList3: [], // 选中值
			staffList: [], //发起人选择组织和员工列表
			selectIds: [], //选中id
			defaultProps: {
				children: 'children',
				label: 'name'
			}
		}
	},

	computed: {},
	watch: {
		approverDrawer(val) {
			if (!val) {
				this.hasFlag = false
				this.conditionTip = ''
			}
		},
		'approverConfig.examineType': {
			handler(val) {
				if (!val) {
					this.approverConfig.examineType = 1 //默认1
				}
				if (val === 2) {
					this.getroleInitiatorList()
				} else if (val === 3) {
					this.getPositionListData()
				}
			},
			deep: true
		},
		selectList2: {
			handler(val) {
				if (val && this.approverConfig.examineType === 1) {
					var length = this.selectList2.length
					if (length > 1) {
						if (this.approverConfig.examineWay === '') {
							this.approverConfig.examineWay = 1
						}
					} else {
						this.approverConfig.examineWay = ''
					}
				}
				if (this.approverConfig.examineType === 1 && !val) {
					this.approverConfig.examineWay = ''
				}
			},
			deep: true
		},
		'approverConfig.examineIds': {
			handler(val) {
				if (
					val &&
					(this.approverConfig.examineType === 2 ||
						this.approverConfig.examineType === 3)
				) {
					if (this.approverConfig.examineWay === '') {
						this.approverConfig.examineWay = 1
					}
				}
				if (
					(this.approverConfig.examineType === 2 ||
						this.approverConfig.examineType === 3) &&
					!val
				) {
					this.approverConfig.examineWay = ''
					this.approverConfig.examineNames = ''
				}
			},
			deep: true
		},
		'approverConfig.examineRange': {
			handler(val) {
				if (val && this.approverConfig.examineType === 5) {
					if (this.approverConfig.examineWay === '') {
						this.approverConfig.examineWay = 1
					}
				}
				if (!val && this.approverConfig.examineType === 5) {
					this.approverConfig.examineWay = ''
				}
			},
			deep: true
		},
		filterText(val) {
			this.$refs.tree.filter(val)
		}
	},
	methods: {
		init(type) {
			if (type === 0 || type === 2) {
				// 发起人 组织和人员
				getStaffHierarchyStaffs('').then(res => {
					if (res.code === 200) {
						this.staffList = this.checkStaffList(res.data)
					}
				})
			} else {
				getStaffHierarchyStaffs(1).then(res => {
					if (res.code === 200) {
						this.staffList = this.checkStaffList(res.data)
					}
				})
			}
		},
		// 处理 id  重复问题  Id + type
		checkStaffList(data) {
			data.map(i => {
				if (i.type !== 1) {
					i.id = i.id + '_' + i.type
					if (i.children) {
						this.checkStaffList(i.children)
					}
				}
			})
			return data
		},
		filterNode(value, data) {
			if (!value) return true
			return data.name.indexOf(value) !== -1
		},
		// 发起人选中部门与人
		getOpen(type) {
			this.selectList = [...[]]
			this.selectIds = [...[]]
			this.$nextTick(() => {
				this.init(type)
				this.filterText = ''
				//  发起人
				this.addDialogVisible = true
				this.selectList = [...this.selectList2]
				this.selectList2.filter(item => {
					this.selectIds.push(item.id)
				})
			})
			setTimeout(() => {
				this.checkSelectData(this.staffList)
			}, 1000)
		},
		checkSelectData(staffList) {
			var list = this.selectIds
			var arr = staffList
			for (var n = 0; n < list.length; n++) {
				for (var i = 0; i < arr.length; i++) {
					var item1 = arr[i]
					if (list[n] === item1.id) {
						this.getSelectId(item1, i)
					}
					if (item1.children) {
						this.checkSelectData(item1.children)
					}
				}
			}
			return true
		},
		// 清空
		resetChecked(type) {
			this.selectList = [...[]]
			this.selectIds = [...[]]
			this.$nextTick(() => {
				this.$refs.tree.setCheckedKeys([])
				var data = this.staffList
				this.clearSelcet(data)
				this.staffList = [...data]
				if (type === 0) {
					this.approverConfig.launchIds = ''
					this.approverConfig.launches = []
					this.approverConfig.launchType = 0
				}
			})
		},
		clearSelcet(item) {
			for (let i = 0; i < item.length; i++) {
				var element = item[i]
				element.disabled = false
				if (element.children) {
					this.clearSelcet(element.children)
				}
			}
		},

		handleClose(tag) {
			this.selectList2.splice(this.selectList2.indexOf(tag), 1)
			this.selectIds.splice(this.selectIds.indexOf(tag.id), 1)
			if (this.selectList.length === 0 || this.selectList2.length === 0) {
				this.selectIds = []
				this.approverConfig.launches = []
			}
		},

		// 清空某一个
		setCheckedKeys(node) {
			this.$nextTick(() => {
				this.handleClick(node)
			})
		},

		handleClick(data) {
			if (this.selectIds.length > 0 && this.selectIds.indexOf(data.id) > -1) {
				if (data.children) {
					this.delSelectId(data)
				}
				var a = this.selectIds
				if (a.indexOf(data.id) > -1) {
					this.selectIds.splice(a.indexOf(data.id), 1)
					var list = this.selectList
					for (var i = 0; i < list.length; i++) {
						if (data.id === list[i].id) {
							list.splice(i, 1)
						}
					}
					this.selectList = list
				}
				this.$refs.tree.setCheckedKeys(this.selectIds)
			} else {
				this.selectIds.push(data.id)
				this.selectList.push(data)
				if (data.children) {
					this.getSelectId(data)
				}
			}
		},
		getSelectId(data, index) {
			var _this = this
			var list = data.children
			if (list) {
				list.filter((item, index) => {
					this.$nextTick(() => {
						item['disabled'] = true
						var a = this.selectIds
						if (a.indexOf(item.id) > -1) {
							this.selectIds.splice(a.indexOf(item.id), 1)
							var list = this.selectList
							for (var i = 0; i < list.length; i++) {
								if (item.id === list[i].id) {
									list.splice(i, 1)
								}
							}
							this.selectList = list
						}
						if (item.children) {
							this.getSelectId(item, index)
						}
						_this.staffList = [..._this.staffList]
					})
				})
			}
		},

		delSelectId(data) {
			var list = data.children
			list.filter(item => {
				item['disabled'] = false
				var a = this.selectIds
				if (a.indexOf(item.id) > -1) {
					this.selectIds.splice(a.indexOf(item.id), 1)
				}
				this.staffList = [...this.staffList]
				if (item.children) {
					this.delSelectId(item)
				}
			})
		},
		// 选择组织人员 确定
		selectConfirm() {
			this.addDialogVisible = false
			// 删除 选中部门人员
			this.selectList.forEach(item => {
				delete item.children
			})
			// console.log(this.selectList, '删除 children ')
			this.selectList2 = [...this.selectList]
		},
		// 关闭弹框
		dialogClose() {
			this.addDialogVisible = false
			this.$refs.tree.setCheckedKeys([])
			if (this.$refs.tree) {
				this.selectList2.filter(item => {
					this.selectIds.push(item.id)
				})
				this.selectList = [...this.selectList2]
			}
		},
		setPerson(data, tip, index) {
			this.addDialogVisible = false
			this.index = index
			this.approverConfig = {}
			this.newsInfo = {}
			this.approverDrawer = true
			this.selectIds = []
			this.filterText = ''
			this.selectList2 = this.selectList = this.selectList3 = []
			if (tip) {
				this.conditionTip = tip
			}
			if (tip === 0 && data.launchType !== 0) {
				this.selectList2 = [...data.launches]
				this.selectList3 = [...data.launches]
			}
			if (tip === 1 && data.examineType === 1) {
				this.selectList2 = [...data.examines]
				this.selectList3 = [...data.examines]
			}
			if (tip === 2) {
				this.selectList2 = [...data.ccs]
				this.selectList3 = [...data.ccs]
			}
			if (data) {
				// 添加节点自动出现弹框传值
				this.hasFlag = true
			}
			this.newsInfo = JSON.parse(JSON.stringify(data))
			this.approverConfig = JSON.parse(JSON.stringify(data))
		},


		// 是否跨店
		getBtn(val) {
			this.approverConfig.examineCross = val
			if (val === 0) {
				this.approverConfig.examineType = 1
			} else {
				this.approverConfig.examineType = 2
				this.approverConfig.examineWay = ''
			}
			this.approverConfig.examineIds = ''
			this.approverConfig.examineOptional = 0
		},
		// 节点类型
		setTypeRadio(val) {
			this.$nextTick(() => {
				this.approverConfig.examineType = val
				this.approverConfig.examineWay = ''
				this.approverConfig.examineOptional = 0
				this.approverConfig.examines = []
				this.approverConfig.examineRange = ''
				// 注意看这里
				if (val === 2) {
					this.approverConfig.examineIds = ''
					this.getroleInitiatorList()
				} else if (val === 3) {
					this.getPositionListData()
				} else if (val === 5) {
					this.approverConfig.examineRange = 1
					this.approverConfig.examineWay = 1
				} else {
					this.approverConfig.examineIds = ''
				}
			})
		},
		// 角色发起人列表
		getroleInitiatorList() {
			getRoleList('').then(res => {
				if (res.code === 200) {
					this.roleInitiatorList = res.data.list
				}
			})
		},
		// 职位 发起人列表
		getPositionListData() {
			getPositionList({}).then(res => {
				if (res.code === 200) {
					this.postInitiatorList = res.data.list
				}
			})
		},

		closeDrawer() {
			this.approverDrawer = false
			this.selectList2 = [...this.selectList3]
			this.approverConfig = this.newsInfo
			this.setApproverStr()
		},
		// 保存条件设置
		saveCondition() { },
		// 保存弹框设置
		saveApprover() {
			this.setApproverStr()
			this.approverDrawer = false
		},
		// 审批人抄送人显示和校验
		setApproverStr() {
			var _this = this
			var obj = JSON.parse(JSON.stringify(this.approverConfig))
			if (obj.type === 0) {
				// 发起
				if (this.selectList2 && this.selectList2.length > 0) {
					var launchIds = []
					var launchIdNames = []
					this.selectList2.filter(item => {
						launchIds.push(item.id)
						launchIdNames.push(item.name)
					})
					obj.launchIds = launchIds.toString()
					obj.launchNames = launchIdNames.toString()
					obj.launches = [...this.selectList2]
					obj.launchType = 1
				} else {
					obj.launchType = 0
					obj.launchIds = ''
					obj.launchNames = ''
					obj.launches = []
				}
				this.$emit('getData', obj, this.index);

			}
			if (obj.type === 1) {
				obj.examines = []
				if (obj.examineType === 1) {
					var examineIds = []
					var examineNames = []
					this.selectList2.filter(item => {
						examineIds.push(item.id)
						examineNames.push(item.name)
					})
					obj.examineIds = examineIds.toString()
					obj.examineNames = examineNames.toString()
					obj.examines = [...this.selectList2]
				} else if (obj.examineType === 2) {
					// 角色
					_this.roleInitiatorList.filter(item => {
						if (obj.examineIds === item.id) {
							obj.examineNames = item.name
						}
					})
					var examinesObj = {
						examineName: obj.examineNames,
						examineId: obj.examineIds
					}
					obj.examines.push(examinesObj)
				} else if (obj.examineType === 3) {
					// 职位
					_this.postInitiatorList.filter(item => {
						if (obj.examineIds === item.id) {
							obj.examineNames = item.name
						}
					})
					var examinesObj = {
						examineName: obj.examineNames,
						examineId: obj.examineIds
					}
					obj.examines.push(examinesObj)
				} else if (obj.examineType === 4) {
					obj.examineNames = '发起人自己'
					obj.examineIds = 4
					obj.examines = []
				} else if (obj.examineType === 5) {
					obj.examineNames = '发起人自选'
					obj.examines = []
				}
				this.$emit('getData', obj, this.index);
			}

			if (obj.type === 2) {
				if (obj.ccs) {
					var ccIds = []
					var ccNames = []
					this.selectList2.filter(item => {
						ccIds.push(item.id)
						ccNames.push(item.name)
					})
					obj.ccIds = ccIds.toString()
					obj.ccNames = ccNames.toString()
					obj.ccs = [...this.selectList2]
				}
				this.$emit('getData', obj, this.index);
			}
		},
		// 删除节点
		delNode(index) {
			this.$emit('update:nodeConfig', this.nodeConfig.splice(index, 1))
		},
		// 添加节点
		addNode(data, index) {
			this.index = index
			this.$emit(
				'update:nodeConfig',
				this.nodeConfig.splice(index + 1, 0, data)
			)
		}
	}
}
</script>
<style lang="scss" scoped>
.el-dialog__wrapper {
	width: calc(100% - 715px);
	position: fixed;
	top: 0;
	bottom: 0;
	left: 210px;
	overflow: auto;
	margin: 0;

	::v-deep .add_dialog {
		height: calc(100% - 30vh) !important;
		position: relative;

		.el-dialog__header {
			border-bottom: 1px solid #e4e4e4;
			text-align: left;
		}

		.el-dialog__body {
			height: calc(100% - 125px);
			overflow: auto;

			.selectBox {
				width: 100%;
				min-height: 100%;
				display: flex;

				.left {
					flex: 1;
					height: 100%;
					margin-right: 20px;

					.search {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.div {
							min-width: 60px;
						}
					}

					.selectList {
						margin-top: 14px;
						width: 100%;
						height: calc(100% - 50px);
						scrollbar-width: none;
						/* firefox */
						-ms-overflow-style: none;
						/* IE 10+ */
						overflow-x: hidden;
						overflow-y: auto;

						.item {
							width: 100%;
							height: 30px;
							line-height: 30px;
							display: flex;
							justify-content: space-between;

							span:first-child {
								padding: 0 5px;
								max-width: 90%;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							span:last-child {
								padding: 0 5px;
								cursor: pointer;
							}
						}
					}
				}

				.right {
					flex: 1;
					height: 100%;
					border: 1px solid #dfe6ec;
					box-sizing: border-box;

					.title {
						padding: 0 14px;
						line-height: 36px;
						height: 36px;
						background: #f2f2f2;
						color: #333;
						font-size: 14px;
					}
				}
			}
		}

		.el-dialog__footer {
			border-top: 1px solid #e4e4e4;
			text-align: left;
		}

		.el-button:hover,
		.el-button:focus {
			color: #000;
		}
	}
}

.el-dialog__title {
	font-size: 18px !important;
	font-weight: 600 !important;
}

.default-style {
	margin-left: 25px;
}

.search-style {
	label {
		width: 50px !important;
	}

	.el-row {
		padding-right: 0px !important;
	}

	.el-form-item__content {
		margin-left: 50px !important;
	}
}

.flex-style {
	display: flex;
	justify-content: space-between;
}

.dang-style {
	font-size: 14px;
}

.dialog-style {
	z-index: 99999 !important;
	background: rgba(0, 0, 0, 0.5);
}

.v-modal {
	background: none !important;
	z-index: -1 !important;
}

.error_tip {
	position: absolute;
	top: 36px;
	right: 0px;
	transform: translate(150%, 0px);

	i {
		font-size: 24px;
	}
}

.add-node-popover-body {
	display: flex;
}

.el-drawer__wrapper {
	background-color: rgba(0, 0, 0, 0.5);
}

.el-drawer:focus,
.el-drawer__close-btn:focus {
	outline: none;
}
</style>
<style lang="scss" >
//弹框
.set_promoter {
	.el-drawer__header {
		margin-bottom: 0;
		padding: 0 24px;
		border-bottom: 1px solid #ebebeb;

		.title {
			height: 84px;
			line-height: 84px;
			font-size: 20px;
			color: #333;
			justify-content: flex-start;

			i {
				margin-left: 8px;
				font-size: 30px;
			}
		}
	}

	.el-drawer__body {
		overflow-y: auto;
		max-height: 100%;
		padding-bottom: 80px;
	}

	.drawer-content {
		padding: 24px;

		.spBtn {
			display: flex;
			justify-content: center;
			margin-bottom: 5px;
		}

		.spType {
			height: auto;
			margin: 20px 0;
			border-top: 1px solid #ebeef5;

			.title {
				padding: 20px 0;
				color: #333;
				font-size: 14px;
			}

			.el-radio {
				margin-bottom: 16px;

				.mark {
					color: #606266;
				}

				&.is-checked {
					.mark {
						color: #dfb771;
					}
				}

				&:last-child {
					margin-bottom: 0;
				}
			}
		}
	}

	.drawer-content-condition {
		padding: 24px 0;

		.condition-conent-group {
			border-bottom: solid 1px #ebebeb;
			padding-bottom: 20px;

			.condition-group-title {
				padding: 0 24px;
				background: #f7f8fa;
				height: 48px;
				border-top: solid 1px #ebebeb;
				border-bottom: solid 1px #ebebeb;
				margin-bottom: 12px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.condition-group-select {
				padding: 0 24px;
			}

			.remove {
				color: #828282;

				&:hover {
					cursor: pointer;
					color: #4880ff;
				}
			}

			.mg-bot-10 {
				margin-bottom: 10px;
			}

			.conditionbtn {
				.el-button {
					border: 1px dashed #4880ff;
					width: 110px;
				}
			}
		}

		.conditionbtn {
			padding: 0 24px;
			margin-top: 26px;

			.el-button {
				border: solid 1px #4880ff;
				color: #4880ff;
				width: 123px;
			}
		}
	}

	.set_promoter_footer {
		height: 80px;
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 24px;
		display: flex;
		justify-content: flex-start;
		background: #fff;
		width: 100%;
		border-top: 1px solid #ebebeb;
		z-index: 2;
	}

	.icon-icon_explain {
		color: #bfbfbf;
	}
}
</style>
